import { ConfigProvider, Form, Input, ModalProps } from 'antd';
import Modals from '@/components/modals/Modals.tsx';

interface Props extends ModalProps {
  open: boolean;
  onOk: (value: any) => void;
  onCancel: () => void;
}

const ChangePasswordModal = ({ open = true, onOk, onCancel, ...props }: Props) => {
  const [form] = Form.useForm();

  const onSubmit = () => {
    form.submit();
  };

  const onFinish = (values: any) => {
    onOk(values);
  };

  const afterClose = () => {
    form.resetFields();
  };

  return (
    <Modals
      {...props}
      title={'编辑用户信息'}
      open={open}
      onOk={onSubmit}
      onCancel={onCancel}
      afterClose={afterClose}
    >
      <ConfigProvider
        theme={{
          components: {
            Form: {
              labelColor: '#474C5F',
            },
          },
        }}
      >
        <Form layout="vertical" onFinish={onFinish} form={form}>
          <Form.Item
            name={'password'}
            label={'新密码'}
            hasFeedback
            rules={[
              {
                required: true,
                message: '请输入新密码',
              },
            ]}
          >
            <Input.Password
              className="!border-0 !bg-input-gray !text-base"
              placeholder="请输入新密码"
            />
          </Form.Item>
          <Form.Item
            name={'confirmPassword'}
            label={'确认密码'}
            hasFeedback
            rules={[
              {
                required: true,
                message: '输入的密码不一致',
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('输入的密码不一致'));
                },
              }),
            ]}
          >
            <Input.Password
              className="!border-0 !bg-input-gray !text-base"
              placeholder="再次输入密码"
            />
          </Form.Item>
        </Form>
      </ConfigProvider>
    </Modals>
  );
};

export default ChangePasswordModal;
